<template>
  <div class="input-area-container">
    <div class="input-area">
      <input v-model="text" placeholder="请输入问题..." @keyup.enter="send" class="text-input"/>
      <label class="file-upload-btn">
        上传图片
        <input type="file" @change="onFileChange" accept="image/*" class="file-input"/>
      </label>
      <button @click="send" class="send-btn">发送</button>
    </div>
    <!-- 图片预览区域 -->
    <div v-if="imagePreviewUrl" class="image-preview-container">
      <img :src="imagePreviewUrl" alt="预览图片" class="preview-image"/>
      <div class="preview-info">
        <span>{{ imageName }}</span>
        <button @click="clearPreview" class="clear-preview-btn">清除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      image: null,
      imagePreviewUrl: '',
      imageName: ''
    }
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0]
      if (file) {
        this.image = file
        this.imageName = file.name
        // 创建预览URL
        this.imagePreviewUrl = URL.createObjectURL(file)
      }
    },
    send() {
      if (!this.text && !this.image) return
      this.$emit('send', { text: this.text, image: this.image })
      this.text = ''
      this.clearPreview()
    },
    clearPreview() {
      this.image = null
      this.imageName = ''
      // 释放URL对象
      if (this.imagePreviewUrl) {
        URL.revokeObjectURL(this.imagePreviewUrl)
        this.imagePreviewUrl = ''
      }
      this.$el.querySelector('input[type=file]').value = ''
    }
  },
  // 组件销毁时释放URL
  beforeDestroy() {
    if (this.imagePreviewUrl) {
      URL.revokeObjectURL(this.imagePreviewUrl)
    }
  }
}
</script>

<style scoped>
.input-area-container {
  width: 100%;
}
.input-area {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.text-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid #e5e6eb;
  font-size: 14px;
  transition: all 0.2s;
}
.text-input:focus {
  outline: none;
  border-color: #2d8cf0;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
.file-upload-btn {
  padding: 12px 16px;
  background: #f5f6fa;
  color: #4e5969;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.file-upload-btn:hover {
  background: #e5e6eb;
}
.file-input {
  display: none;
}
.send-btn {
  padding: 12px 24px;
  background: #2d8cf0;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.send-btn:hover {
  background: #1d7ae0;
  transform: translateY(-1px);
}
.send-btn:active {
  transform: translateY(1px);
}
/* 图片预览样式 */
.image-preview-container {
  width: 100%;
  border: 1px dashed #e5e6eb;
  border-radius: 8px;
  padding: 16px;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 12px;
}
.preview-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #4e5969;
}
.clear-preview-btn {
  padding: 6px 12px;
  background: #f0f2f5;
  color: #4e5969;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.clear-preview-btn:hover {
  background: #e5e6eb;
}
</style>